import { defineComponent, ref, toRefs } from "vue";
import style from "./index.module.less";
import PopTitle from "@/components/PopTitle";
import Search from "@/components/Search";
import SidebarView from "@/components/SidebarView";
import RowView from "@/components/RowView";
import PageTitle from "@/components/PageTitle";
import { Grid, GridItem } from "vant";
import { useRequest } from "./request";
import { useRouter } from "vue-router";
import TextView from "@/components/TextView";
import { getSize } from "@/command/apiTool";
import Empty from "@/components/Empty";
export default defineComponent({
  name: "",
  setup() {
    const router = useRouter();
    const { left, right, getRight } = useRequest();
    const active = ref(0);
    // const { name } = toRefs(options);
    const renderRight = () => {
      if (right.value.length == 0) {
        return (
          <div
            class="flex flex-1 items-center justify-center"
            style={{ height: `calc(100vh - ${getSize(50)})` }}
          >
            <Empty />
          </div>
        );
      }
      return (
        <div
          class="bg-white flex flex-col flex-1 h-full overflow-y-scroll no-scrollbar"
          style={{ maxHeight: `calc(100vh - ${getSize(50)})` }}
        >
          <Grid border={false} columnNum={2}>
            {right.value.map((e) => {
              console.log('info',e);
              
              return (
                <GridItem onClick={()=>router.push(`/agriculturalTechnologyClassDetial?id=${e.id}`)}>
                  <img
                    src={e.path + "?vframe/jpg/offset/0/w/480/h/110"}
                    class="w-full h-[110px] rounded-5"
                    style={{ backgroundSize: "100% 100%" }}
                  />
                  <TextView
                    class="text-[14px] text-[#333] h-[20px]"
                    style={{ maxWidth: "100px" }}
                    limitedNumber={1}
                  >
                    {e.title}
                  </TextView>
                </GridItem>
              );
            })}
          </Grid>
        </div>
      );
    };
    const renderBody = () => {
      const data = left.value.map((e: any) => {
        return {
          name: e.name,
          value: e.id,
        };
      });
      // const data = [
      //   {
      //     name: "测试",
      //     value: "1",
      //   },
      // ];
      return (
        <RowView class="flex-1 bg-white !items-start">
          <SidebarView
            data={data}
            v-model={active.value}
            onChange={(value: any) => {
              // id.value = value;
              getRight(value);
            }}
          />
          {renderRight()}
        </RowView>
      );
    };
    return () => {
      return (
        <PageTitle
          title="农技课堂"
          childClass="!p-[0] flex flex-1 flex-col !bg-white"
          bgColor="white"
        >
          {/* <div>
            <Search
              class="bg-[#F5F5F5] !h-[52px]"
              placeholder="请输入搜索关键词"
              // v-model={name.value}
            />
          </div> */}
          {renderBody()}
        </PageTitle>
      );
    };
  },
});
